<template>
	<uni-popup ref="popup" background-color="#fff" :is-mask-click="false">
		<view class="pwd">
			<view class="pwd-retrieve-container">
				<uni-forms ref="form" :value="user" :rules="rules" labelWidth="80px">
					<uni-forms-item name="oldPassword" label="原密码">
						<uni-easyinput :inputBorder="false" type="password" placeholder="请输入原密码"
							v-model="user.oldPassword" :maxlength="16" />
					</uni-forms-item>
					<uni-forms-item name="newPassword" label="新密码">
						<uni-easyinput :inputBorder="false" type="password" placeholder="请输入新密码"
							v-model="user.newPassword" />
					</uni-forms-item>
					<uni-forms-item name="confirmPassword" label="确认密码">
						<uni-easyinput :inputBorder="false" type="password" placeholder="请确认密码"
							v-model="user.confirmPassword" />
					</uni-forms-item>
					<view class="text-red">密码必须是8位以上的英文字母、数字、字符组合(非纯数字)</view>
				</uni-forms>
        <view class="op-btn">
          <button class="button" @click="save">保存</button>
          <button class="button" @click="cancel">取消</button>
        </view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {
		updateUserPwd
	} from "@/api/login"
  import {getTokenAlias, setToken} from "../../../utils/auth";
	export default {
		data() {
			const validatorPwd = (rule, value, data, callback) => {
				// const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/
				const regex = /^(?=.*[a-z])(?=.*\d)(?=.*[\W_]).{8,}$/
				if (regex.test(value)) {
					return true;
				} else {
					return callback('输入不符合密码设置规则');
				}
			};
			return {
				user: {
					oldPassword: undefined,
					newPassword: undefined,
					confirmPassword: undefined
				},
				rules: {
					oldPassword: {
						rules: [{
							required: true,
							errorMessage: '旧密码不能为空'
						}]
					},
					newPassword: {
						rules: [{
								required: true,
								errorMessage: '新密码不能为空',
							},
							{
								validateFunction: validatorPwd,
							}
						]
					},
          confirmPassword: {
            rules: [{
              required: true,
              errorMessage: '确认密码不能为空'
            }, {
              validateFunction: (rule, value, data) => data.newPassword === value,
              errorMessage: '两次输入的密码不一致'
            }]
          }
				}
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			cancel() {
				this.$refs.popup.close()
			},
			async save() {
				await this.$refs.form.validate()
        setToken(getTokenAlias())
				updateUserPwd({
					oldPwd: this.user.oldPassword,
					newPwd: this.user.newPassword
				}).then(response => {
					this.$store.dispatch('LogOut').then(() => {
						this.clearUserInfo()
						this.$tab.reLaunch('/pages/login')
					})
          this.$modal.msgSuccess("修改成功")
				})
			},
			clearUserInfo() {
				// uni.removeStorageSync('password');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pwd-retrieve-container {
		margin-top: 20rpx;
		background: #fff;
		box-sizing: border-box;
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
    padding: 10px;
    border-radius: 10px;

		.uni-easyinput {
			text-align: right;
			font-size: 28rpx;
			padding-right: 22rpx;
			box-sizing: border-box;
		}

		::v-deep .uni-forms-item__content uni-easyinput__content {
			height: 100%;
		}

		::v-deep .uni-forms-item__error {
			top: 70%;
			left: initial;
			right: 22rpx;
		}

		::v-deep .uni-easyinput__placeholder-class {
			font-size: 28rpx;
			color: #BBBBBB;
		}

		::v-deep .uniui-eye-filled {
			color: rgb(192, 196, 204) !important
		}

		.uni-forms-item {
			border-bottom: 1rpx solid #D5D7E3;
			margin-bottom: 0rpx;
			padding: 14rpx 0;
		}
	}

	.text-red {
		color: #A14430;
		font-size: 24rpx;
		text-align: center;
		margin-top: 20rpx;
		margin-bottom: 97rpx;
	}

	::v-deep  .input-placeholder {
		color: #BBBBBB;
	}

	.password-modal-content {
		padding: 20px;
	}

	.password-modal-content input {
		margin-bottom: 10px;
		padding: 10px;
		border: 1px solid #ccc;
	}
  .op-btn{
    display: inline-flex;
    justify-content: space-around;
    width: 100%;
  }
  .op-btn .button {
    line-height: 30px;
    height: 30px;
    font-size: 14px;
    width: 35%;
  }
</style>
